<div class="toolbar"></div>
<div class="p-3">
    <div class="card">
        <div class="d-flex mt-3 mb-3">
            <div class="flex-grow-1 border-right" style="max-width: 200px;">
                <ts-side-tabs [target]="tabContents">
                    <ts-tab>
                        <div class="ml-2">公司信息</div>
                    </ts-tab>
                    <ts-tab [active]="true">
                        <div class="ml-2">应用列表</div>
                    </ts-tab>
                    <ts-tab>
                        <div class="ml-2">开发者参数</div>
                    </ts-tab>
                    <ts-tab>
                        <div class="ml-2">其他设置</div>
                    </ts-tab>
                </ts-side-tabs>
            </div>
            <div #tabContents="tsTabs" tsTabs class="flex-grow-1 pl-2">
                <!-- 账户信息 -->
                <div tsTab>
                    <h5 class="card-header">公司信息</h5>
                    <div class="card-body">
                        <form autocomplete="off" class="container m-0" style="max-width: 600px;">
                            <div class="form-group">
                                <label>公司图标</label>
                                <div>
                                    <ts-image-card [(src)]="company.comapnyLogo" [config]="config" title=""></ts-image-card>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>公司名称</label>
                                <input required placeholder="如：测试公司" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>公司描述文本</label>
                                <textarea required placeholder="一段描述文本，用于简单介绍主要的业务" type="text" class="form-control"></textarea>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- 详细信息 -->
                <div tsTab>
                    <h5 class="card-header">应用列表</h5>
                    <div class="card-body">
                        <ts-table-load [display]="page.loading"></ts-table-load>
                        <table class="table  text-center table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th *ngFor="let th of tableHeads">{{th}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let row of tableRows">
                                    <td>
                                        <img tsImg [src]="row.appThumb" dataSrc="assets/images/404.jpg" width="40"
                                            height="30" alt="图标">
                                    </td>
                                    <td>{{row.appName}}</td>
                                    <td>
                                        <ts-switch [ngModel]="row.isActive" [values]="{open:1,close:0}"></ts-switch>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-link text-danger">删除</button>
                                        <button routerLink="/app-storage/app-main" class="btn btn-sm btn-link">设置</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td [attr.colspan]="tableHeads.length" class="text-right p-1">
                                        <ts-pagination [pagination]="page"></ts-pagination>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- <div class="border" style="width:400px;">
                            <div class="card-body">
                                <div class="media">
                                    <img class="mr-3" src="assets/images/app/wechat.svg" width="50" height="50" alt="微信">
                                    <div class="media-body">
                                        <h5 class="mt-0 text-info">微信服务</h5>
                                        <p class="text-muted">在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-link text-danger">删除</button>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div tsTab>
                    <h5 class="card-header">开发者参数</h5>
                    <div class="card-body">
                        <div class="form-inline">
                            <div class="form-group mb-4" style="width:100px;">
                                <label>开发序列号</label>
                            </div>
                            <div class="input-group mb-4 mx-2">
                                <span class="badge badge-success">x891789</span>
                            </div>
                        </div>
                        <div class="form-inline">
                            <div class="form-group mb-4" style="width:100px;">
                                <label>授权令牌</label>
                            </div>
                            <div class="input-group mb-4 mx-2">
                                <span class="badge badge-success">x8917dfadsr321489304jkjdksfndskiuertjwejk689</span>
                            </div>
                        </div>
                        <div class="m-btn">
                            <button tsBtn="info" loading class="mb-4">重新生成</button>
                        </div>
                    </div>
                </div>
                <!-- 其他设置设置 -->
                <div tsTab>
                    <h5 class="card-header">消息通知设置</h5>
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p>启用短信通知</p>
                                <p class="text-muted">开启短信通知，每次有重要的消息将会主动推送到您的手机上</p>
                            </div>
                            <ts-switch></ts-switch>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between">
                            <div>
                                <p>接受语音消息</p>
                                <p class="text-muted">允许系统发送语音提示消息</p>
                            </div>
                            <ts-switch></ts-switch>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between">
                            <div>
                                <p>接收消息</p>
                                <p class="text-danger">如果关闭，您将收不到任何消息！</p>
                            </div>
                            <ts-switch [ngModel]="true"></ts-switch>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>